<template>
  <div class="myList">
    <ul>
      <li v-for="item in listData" :key="item.product_id">
        <el-popover placement="top">
          <p>确定删除吗？</p>
          <div style="text-align: right; margin: 10px 0 0">
            <el-button
              type="primary"
              size="mini"
              @click="deleteCollect(item.product_id)"
              >确定</el-button
            >
          </div>
          <i
            class="el-icon-close delete"
            slot="reference"
            v-show="isDelete"
          ></i>
        </el-popover>
        <router-link
          :to="{ path: '/details', query: { productID: item.product_id } }"
        >
          <img :src="$target + item.product_picture" :alt="item.product_name" />
          <h2>{{ item.product_name }}</h2>
          <h3>{{ item.product_title }}</h3>
          <p>
            <span>{{ item.product_selling_price }}元</span>
            <span
              v-if="item.product_selling_price != item.product_price"
              class="del"
            >
              {{ item.product_price }}元</span
            >
          </p>
        </router-link>
      </li>
      <li id="more" v-if="!isMore" @click="test">
        <router-link to="">
          浏览更多
          <i class="el-icon-d-arrow-right"></i>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import collectApi from "../api/collectApi";
export default {
  name: "MyList",
  props: ["listData", "isMore", "isDelete"],
  data() {
    return {
      // product_id:""
    };
  },

  computed: {
    categoryArr() {
      let arr = [];
      if (this.listData.length) {
        this.listData.forEach((item) => {
          if (!arr.includes(item.category_id)) {
            arr.push(item.category_id);
          }
        });
      }
      console.log(arr);
      return arr;
    },
  },

  methods: {
    test() {
      this.$globalData.categoryArr = this.categoryArr;
      this.$router.push("/goods");
    },

    deleteCollect(product_id) {
      let deleteList = {
        user_id: this.$store.getters.getUser.user_id,
        product_id: product_id,
      };
      console.log(deleteList);
      collectApi
        .deleteColl(deleteList)
        .then((res) => {
          switch (res.data.code) {
            case "001":
              // 删除成功
              // 删除删除列表中的该商品信息
              for (let i = 0; i < this.listData.length; i++) {
                const temp = this.listData[i];
                if (temp.product_id == product_id) {
                  this.listData.splice(i, 1);
                }
              }
              // 提示删除成功信息
              this.$notify({
                title: "成功",
                message: res.data.msg,
                type: "success",
              });

              break;
            default:
              // 提示删除失败信息
              this.$notify({
                title: "警告",
                message: res.data.msg,
                type: "warning",
              });
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  },
};
</script>

<style lang="scss" type="text/scss" scoped>
.myList {
  li {
    position: relative;
    float: left;
    padding: 10px 0;
    margin: 0 0 14.5px 13.7px;
    width: 234px;
    height: 280px;
    background-color: #fff;
    transition: all 0.2s linear;
    z-index: 1;

    &#more {
      text-align: center;
      line-height: 280px;
      font-size: 18px;
      color: #333;
    }

    img {
      display: block;
      width: 160px;
      height: 160px;
      background: url("../assets/imgs/placeholder.png") no-repeat 50%;
      margin: 0 auto;
    }
    h2 {
      margin: 25px 10px 0;
      font-size: 14px;
      color: #333;
      font-weight: 400;
      text-align: center;

      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    h3 {
      margin: 5px 10px;
      height: 18px;
      font-size: 12px;
      font-weight: 400;
      color: #b0b0b0;
      text-align: center;

      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    p {
      margin: 10px 10px 10px;
      text-align: center;
      color: #ff6700;
      .del {
        margin-left: 0.5em;
        color: #b0b0b0;
        text-decoration: line-through;
      }
    }
    .delete {
      position: absolute;
      top: 10px;
      right: 10px;
      display: none;
    }
  }
}
.myList ul li:hover .delete {
  display: block;
}
.myList ul li .delete:hover {
  color: #ff6700;
}
</style>
